<template>
  <div class="box">
    <el-table
      :data="tableData"
      style="width: 100%;height:390px; font-size: 14px; color: #222;"
      :border="false"
      :cell-style="{'background-color': '#fafafa', 'border': 'none','text-align': 'center'}"
      :header-cell-style="{'background-color': '#f0f6fa', 'border': 'none','text-align': 'center','color': '#222','font-weight': 'normal'}"
    >
      <el-table-column prop="column1" label="类型" />
      <el-table-column prop="column2" label="交易品种" />
      <el-table-column prop="column3" label="地区" />
      <el-table-column prop="column4" label="数量(吨)" />
      <el-table-column prop="column5" label="单价(元/吨)" />
      <el-table-column prop="column6" label="等级" />
      <el-table-column prop="column7" label="商家名称" />
      <el-table-column prop="column8" label="发布时间" />
    </el-table>
  </div>
</template>

<script setup>
// 示例数据
const tableData = [
  {
    column1: '供应',
    column2: '小麦',
    column3: '新乡市',
    column4: '2000',
    column5: '2448',
    column6: '国标二等',
    column7: '个人',
    column8: '2025-05-01'
  },
  {
    column1: '内容2-1',
    column2: '内容2-2',
    column3: '内容2-3',
    column4: '内容2-4',
    column5: '内容2-5',
    column6: '内容2-6',
    column7: '内容2-7',
    column8: '内容2-8'
  },
  {
    column1: '内容3-1',
    column2: '内容3-2',
    column3: '内容3-3',
    column4: '内容3-4',
    column5: '内容3-5',
    column6: '内容3-6',
    column7: '内容3-7',
    column8: '内容3-8'
  },
  {
    column1: '供应',
    column2: '小麦',
    column3: '新乡市',
    column4: '2000',
    column5: '2448',
    column6: '国标二等',
    column7: '个人',
    column8: '2025-05-01'
  },
  {
    column1: '供应',
    column2: '小麦',
    column3: '新乡市',
    column4: '2000',
    column5: '2448',
    column6: '国标二等',
    column7: '个人',
    column8: '2025-05-01'
  },
  {
    column1: '供应',
    column2: '小麦',
    column3: '新乡市',
    column4: '2000',
    column5: '2448',
    column6: '国标二等',
    column7: '个人',
    column8: '2025-05-01'
  },
  {
    column1: '供应',
    column2: '小麦',
    column3: '新乡市',
    column4: '2000',
    column5: '2448',
    column6: '国标二等',
    column7: '个人',
    column8: '2025-05-01'
  },
  {
    column1: '供应',
    column2: '小麦',
    column3: '新乡市',
    column4: '2000',
    column5: '2448',
    column6: '国标二等',
    column7: '个人',
    column8: '2025-05-01'
  },
  {
    column1: '供应',
    column2: '小麦',
    column3: '新乡市',
    column4: '2000',
    column5: '2448',
    column6: '国标二等',
    column7: '个人',
    column8: '2025-05-01'
  },
]
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  // padding: 20px;
}

// 全局样式覆盖，确保表格无边框
:deep(.el-table) {
  border: none;
  
  .el-table__header-wrapper {
    th {
      border: none;
      background-color: #f0f6fa;
    }
  }
  
  .el-table__body-wrapper {
    td {
      border: none;
      background-color: #fafafa;
    }
  }
}
</style>